<template>
  <div class="member-updatemobile">
    <div class="header">
      <h4>更换手机号</h4>
    </div>
    <div v-if="currStep !== 3">
      <div class="step">
        <XtxSteps :active="currStep">
          <XtxStepsItem title="验证身份" />
          <XtxStepsItem title="修改手机号" />
          <XtxStepsItem title="完成更换" />
        </XtxSteps>
      </div>
      <div class="check-mobile" v-if="currStep===1">
        <div class="update-tip">
        <p>已绑定的手机：{{profile.mobile.replace(/^(\d{3})\d{4}(\d{4})/,'$1****$2')}}</p>
        <p>若该手机号已无法使用请联系客服</p>
        </div>
        <form class="xtx-form-label">
          <div class="xtx-form-item">
            <label>验证码：</label>
            <input type="text" placeholder="短信验证码" v-model="mobileCode"/>
            <span class="code" @click="getMobileCode()">{{time === 0 ? '发送验证码' : `${time}秒后失效`}}</span>
          </div>
          <div class="xtx-form-item">
            <label></label>
            <a class="submit" href="javascript:;" @click="verifyMobile" >下一步</a>
          </div>
        </form>
      </div>
      <div class="bind-new-mobile" v-if="currStep === 2">
        <form class="xtx-form-label">
          <div class="xtx-form-item">
            <label>手机号：</label>
            <input type="text" placeholder="请输入新的手机号" v-model="mobile" />
          </div>
          <div class="xtx-form-item">
            <label>验证码：</label>
            <input type="text" placeholder="短信验证码" v-model="newMobileCode" />
            <span class="code" @click="getNewMobileCode()">{{time === 0 ? '发送验证码' : `${time}秒后失效`}}</span>
          </div>
          <div class="xtx-form-item">
            <label></label>
            <a class="submit" href="javascript:;" @click="bindNewMobile" >下一步</a>
          </div>
        </form>
      </div>
    </div>
    <div class="success-tips" v-else>
      <span class="iconfont icon-queren2"></span>
      <p class="titel">手机号码更换成功</p>
      <p class="desc">您可以在下次使用新号码进行登录</p>
      <RouterLink class="btn" to="/member/account">返回</RouterLink>
    </div>
    <div class="xtx-safe-warn" style="margin:40px">
      <p>温馨提示</p>
      <p>为保障您的帐号安全，变更重要信息需要身份验证</p>
      <p>若有疑问请联系在线客服或拨打400-0000-000（周一至周日 8:00-18:00）</p>
    </div>
  </div>
</template>

<script>
import { computed, onUnmounted, ref } from 'vue'
import { useStore } from 'vuex'
import Message from '@/components/library/message'
import { useIntervalFn } from '@vueuse/core'
export default {
  name: 'UpdateMobile',
  setup () {
    const store = useStore()
    const currStep = ref(1)
    const profile = computed(() => {
      return store.state.user.profile
    })
    const mobile = ref('')
    const mobileCode = ref('')
    const newMobileCode = ref('')
    // 倒计时的pasue 暂停 resume 开始
    // useIntervalFn (回调函数，执行间隔，是否立即开启)
    const time = ref(0)
    const { pause, resume } = useIntervalFn(() => {
      time.value--
      if (time.value <= 0) {
        pause()
      }
    }, 1000, false)
    onUnmounted(() => {
      pause()
    })
    // 获取已绑定手机的验证码
    const getMobileCode = () => {
      if (time.value === 0) {
        time.value = 60
        resume()
      }
    }
    // 验证已绑定手机号
    const verifyMobile = () => {
      if (mobileCode.value) {
        if (!/^\d{6}$/.test(mobileCode.value)) {
          Message({ type: 'warn', text: '验证码位数不正确' })
        } else {
          currStep.value = 2
          // 计时器置零并停止计时
          time.value = 0
          pause()
        }
      } else {
        Message({ type: 'warn', text: '验证码不能为空' })
      }
    }
    // 获取新手机号的验证码
    const getNewMobileCode = () => {
      if (mobile.value) {
        // 验证手机号格式
        if (/^1[3-9]\d{9}$/.test(mobile.value)) {
          time.value = 60
          resume()
        } else {
          Message({ type: 'warn', text: '手机号码格式不正确' })
        }
      } else {
        Message({ type: 'warn', text: '请填写新手机号码获取验证码' })
      }
    }
    // 绑定新手机
    const bindNewMobile = () => {
      if (mobile.value && newMobileCode.value) {
        if (!/^\d{6}$/.test(newMobileCode.value)) {
          Message({ type: 'warn', text: '验证码位数不正确' })
        } else {
          currStep.value = 3
        }
      } else {
        Message({ type: 'warn', text: '电话号码或验证码不能为空' })
      }
    }
    return { currStep, profile, mobile, mobileCode, newMobileCode, time, getMobileCode, verifyMobile, getNewMobileCode, bindNewMobile }
  }
}
</script>

<style lang="less" scoped>
.member-updatemobile {
  height: 100%;
  background: #fff;
  padding: 0 20px;
  .header {
    height: 66px;
    border-bottom: 1px solid #f5f5f5;
    padding: 20px 0 18px 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    h4 {
      font-size: 18px;
      font-weight: normal;
    }
  }
  .step {
    padding: 50px 120px;
  }
  .update-tip {
    text-align: center;
    height: 50px;
    margin-bottom: 40px;
    p:first-child {
      font-size: 18px;
    }
    p:last-child {
      color: #999;
    }
  }
  .xtx-form-label {
    padding-left: 260px;
    .xtx-form-item {
      position: relative;
      padding-bottom: 40px;
      display: flex;
      label {
        width: 100px;
        padding-right: 15px;
        text-align: right;
        font-size: 16px;
        height: 50px;
        line-height: 50px;
        color: #999;
      }
      input {
        width: 300px;
        height: 50px;
        border: 1px solid #e4e4e4;
        padding-left: 10px;
      }
      .code {
        position: absolute;
        left: 310px;
        top: 16px;
        color: #27ba9b;
        cursor: pointer;
      }
      .submit {
        width: 300px;
        height: 50px;
        background: #27ba9b;
        border-radius: 4px;
        display: block;
        font-size: 16px;
        color: #fff;
        text-align: center;
        line-height: 50px;
      }
    }
  }
  .xtx-safe-warn {
    padding: 20px;
    margin-top: 40px;
    background: #f5f5f5;
    color: #999;
    line-height: 30px;
    p {
      padding-left: 10px;
      position: relative;
      &:first-child {
      line-height: 40px;
      color: #333;
    }
    }
  }
  .success-tips {
    padding-top: 150px;
    text-align: center;
    color: #999;
    .iconfont {
      font-size: 80px;
      color: #1dc779;
    }
    .titel {
      font-size: 20px;
      padding: 20px 0;
    }
    .desc {
      font-size: 16px;
      padding-bottom: 20px;
    }
    .btn {
      width: 180px;
      height: 50px;
      background: #27ba9b;
      border-radius: 4px;
      display: block;
      font-size: 16px;
      color: #fff;
      text-align: center;
      line-height: 50px;
      margin: 0 auto;
    }
  }
}
</style>
